<template>
    <div class="BOX">
        <table border="1" cellspacing="0" width="100%">
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>出生年月</th>
                    <th>地址</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item, index in newarr" :key="index">
                    <td>{{ item.name }}</td>
                    <td>{{ item.age }}</td>
                    <td>{{ item.sex }}</td>
                    <td>{{ item.year }}</td>
                    <td>{{ item.dz }}</td>
                    <td>
                        <button>编辑</button>&nbsp;&nbsp;
                        <button>删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <div class="box-1">
            <getdang></getdang>
        </div>
    </div>
</template>

<script>
import bus from "../JS/bus";
export default {
    data() {
        return {
            arr: [
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' },
                { name: '刘旭', age: 20, sex: '男', year: 2002 - 10 - 10, dz: '重庆' }
            ],
            newarr: [],
            pageSize: 5
        }
    },
    mounted() {
        this.newarr = this.arr.slice(0, this.pageSize)
        bus.$emit("send", this.arr);
        bus.$emit("send2", this.pageSize);
        bus.$on("send1", (val) => {
            // console.log(val);
            this.newarr = val;
        });
    }
}
</script>

<style lang="less" scoped>
td {
    text-align: center;
}
.box-1 {
    position: absolute;
    top: 465px;
    left: 650px;
}
</style>